<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>键盘事件</title>
    <style>
        #box1{
            width: 100px;
            height: 100px;
            background-color: blueviolet;
        }
    </style>
</head>
<body>
    <div id="box1"></div>
    <input type="text">
</body>
</html>
<script>
    /*
        键盘事件
            onkeydown
                - 按键被按下
                - 对于onkeydown 来说 如果一直摁着某个按键不松手 ，则事件会一直触发
                - 当onkeydown 连续触发时，第一次和第二次之间会间隔稍微长一点，其他的会非常快
                    这种设计是为了防止误操作的发生
            onkeyup
                - 按键被松开

            键盘事件一般都会绑定给一些 可以获取到焦点的对象 或 document
    */

    document.onkeydown=function(event){
        event = event || window.event;
        
        /*
            可以通过keyCode 来获取按键的编码
                通过他可以判断那个按键被按下
            除了 keyCode,事件对象中还提供了几个属性
                altKey
                ctrlKey
                shiftKey
                    - 这三个用来判断 alt ctrl 和 shift是否被按下
                        如果按下则返回true，否则返回false
        */

        // 判断一个 y 是否被按下
        if(event.key == "y" && event.ctrlKey){
            alert(event.key);
        }
        
        // console.log(event.keyCode);



        // 获取input
        var ipt = document.getElementsByTagName("input")[0];
        ipt.onkeydown = function(event){
            event = event || window.event;
            console.log("按键被按下");

            // 使文本框中不能输入数字
            if(event.keyCode<=57 && event.keyCode>=48 || event.keyCode<=105 && event.keyCode>=96){
                return false;
            }
            /*
                在文本框中输入内容，属于onkeydown 的默认行为
                如果在onkeydown 中取消了默认行为，则输入的内容，不会出现在文本框中
            */
            
        };

    };

    
    
</script>